<template>
	<el-collapse v-model="activeNames" @change="handleChange" accordion>
	  <el-collapse-item v-for="item in listDataX"  title="" :name="item.id" :key="item.id">
		  <template slot="title" >
			<span class="title">{{item.name}}</span>
			<span class="info"  :class="{hasConfig:item.contentList.length!=0}">{{item.contentList.length ==0 ? '未配置' :'已配置'}}</span>
		  </template>
		  <el-table	:data="item.contentList"   >
		      <el-table-column  prop="inspection"  label="巡查内容"  align="center" >
				<template slot-scope="scope">
					<el-input type="text" v-model="scope.row.inspection"></el-input>
				</template>
		      </el-table-column>
		      <el-table-column  prop="formType"  label="巡查审定方式"  align="center" width="250">
				<template slot-scope="scope">
					<el-radio v-model="scope.row.formType" label="radio">单选(是/否)</el-radio>
					<el-radio v-model="scope.row.formType" label="text" disabled>文本</el-radio>
				</template>
		      </el-table-column>
		      <el-table-column  label="操作" align="center" width="150">
				  <!-- <i slot="header" class="opt el-icon-plus"  @click="addText(item.id)">编辑</i> -->
				  <i slot="header" class="opt el-icon-plus"  @click="addText(item.id)">添加</i>
				  <i slot="header" class="opt iconfont icon-baocun"  @click="saveText(item.id)" :loading="btnLoading">保存</i>
				  <slot slot-scope="scope">
					  <i class="opt el-icon-plus" @click="addText(item.id,scope)"  title="添加"></i>
					  <i class="opt el-icon-delete" @click="deleteText(item.id,scope)" title="删除"></i>
				  </slot>
		      </el-table-column>
		    </el-table>
	  </el-collapse-item>
	</el-collapse>
</template>
<script>
export default {
	props:{
		initData:[Array],
	},
	data() {
	  return {
		listData:[],
		activeNames: [],
		listDataX:[],
		btnLoading:false
		
	  }
	},
	watch:{
		initData(val){
			var val=val ||[];
			this.listDataX=val.map((item)=>{
				item.contentList=[]
				return item;
			})
			this.getList()
			this.activeNames.push(this.listDataX[0].id)
		}
	},
	methods: {
		//查询场所巡查内容
		getList(){
			this.$http.getPlaceContentList()
			.then((res)=>{
				var data=res.data.data ||[];
				this.listDataX=this.listDataX.map((item)=>{
					for(var key in data){
						if(item.name==key){
							item.contentList=data[key]
						}
					}
					if(!item.contentList){
						item.contentList=[]
					}
					return item;
				})
			}).catch((err)=>{
				throw(err)
			})
			
		},
	  handleChange(val) {
		console.log(val);
	  },
	  
	  addText(itemId,row){
		  this.listDataX=this.listDataX.map((item)=>{
			  let content={
				  inspection:"",
				  formType:"radio"
			  }
			  if(item.id==itemId){
				  if(row){
					 item.contentList.splice(row.$index+1,0,content)
				  }else{
				  	item.contentList.push(content)	  
				  } 
			  }
			  return item;
		  })
		  
	  },
	  
	  deleteText(itemId,row){
		  this.listDataX=this.listDataX.map((item)=>{
			  if(item.id==itemId){
				  item.contentList.splice(row.$index,1)
			  }
			  return item;
		  })
	  },
	  
	  saveText(itemId){
		  var activeItem=this.listDataX.filter((item)=>{
			  if(item.id==itemId){
				  return true
			  }
		  })[0];
		  var submitData={
			  placeTypeId:activeItem.id,
			  placeType:activeItem.name,
			  contentList:activeItem.contentList
		  }
		  
		  var bool=activeItem.contentList.some((item)=>{
			  if(!item.inspection){
				  return true
			  }
		  })
		  if(bool){
			  this.$message.warning("请填写完整!")
			  return
		  }
		  this.$http.editPlaceContent(submitData)
		  .then((res)=>{
			  this.$message.success("保存成功!")
		  }).catch((err)=>{
			  throw(err)
		  })
	  }
	},
	created() {
		
	}
	
  }
</script>
<style scoped="scoped" lang="less">

 .el-collapse{
	/deep/ .el-collapse-item{
		//background-color: red;
		&:last-child .el-collapse-item__header{
			border-bottom: none;
		}
	}
	/deep/ .el-collapse-item__header{
		padding-left: 20px;
		background-color:transparent;
		.title{
			margin-right: 10px;
			font-weight: bolder;
			font-size: 16px;
			&::before{
				content: '';
				width: 3px;
				height: 1em;
				display: inline-block;
				background-color: #4877E6;
				margin-right: 10px;
				vertical-align: middle;
				line-height: 0em;
				margin-top: -3px;
			}
		}
		.info{
			color: #ffc747;
		}
		.hasConfig{
			color:#52ce73;
		}
	}
	/deep/  .el-collapse-item__wrap{
		background-color: transparent;
		border-bottom: none;
	}
}

/deep/ .el-table{
	&::before{
		height: 0px;
	}
	.opt{
		margin:0px 10px;
		font-weight: bolder;
		font-size: 14px;
	}
	.el-table__row:hover{
		//background-color: transparent;
		td{
			//background-color: transparent;
		}
	}
	td{
		border-bottom: none;
		&:hover{
			//background-color: transparent;
		}
	}
	.el-input__inner{
		height: 35px;
		line-height: 35px;
		border-radius: 0px;
		border:none;
		border-bottom: 1px solid #c3d8ff;
		background-color: transparent;
		&:hover{
			//border-color: #7C91BB;
		}
		&:focus{
			border-bottom-color: #a9c6ff;
		}
	}
	th,tr{
		background-color: #fdfff1;
	}
}

.el-icon-plus{
	color: #4bbb1c;
}
.el-icon-delete{
	color: #ff8100;
}
.iconfont.icon-baocun{
	color: #0095ff;
}
	
</style>

